<!-- 商家列表 组件 -->
<template>
    <div>
      <router-link to="./shop" tag="div" v-for="item in sellerlistdata || localsellerlistdata" :key="item.id">
        <div class="seller-list-item">
          <div class="left">
            <img v-lazy="item.pic_url" />
          </div>
          <div class="right">
            <div class="name">{{ item.name }}</div>
            <div class="mid clearfix">
              <van-rate v-model="value" readonly size="16" color="#ffd21e" />
              <span class="count fl">{{item.wm_poi_score}}</span>
              <span class="distance fr">月售:{{item.sales}}</span>
              <span class="time fr">{{item.avg_delivery_time}}分钟 | {{item.distance}}</span>
            </div>
            <div class="fee">
              <span class="start">{{item.min_price_tip}}</span>
              <span class="deliver">{{ item.shipping_fee_tip }}</span>
              <span class="average">{{item.average_price_tip}}</span>
            </div>
            <div class="activity">
              <p>
                <img
                  src="https://p0.meituan.net/activityconfig/6087b33fd42d14fd94e899084aaef56d1720.png"
                />
                <span>满20减10，满40减20，满60减25</span>
              </p>
              <p>
                <img
                  src="https://p0.meituan.net/activityconfig/3da2d9c7a4ddf89e4e71cfdfff168c391088.png"
                />
                <span>折扣商品0.1折起</span>
              </p>
            </div>
          </div>
        </div>
      </router-link>
    </div>
</template>
<script>
import Vue from "vue";
import { Rate } from "vant";
import axios from "axios";
import { mapState } from "vuex";
Vue.use(Rate);
export default {
  components: {},
  data() {
    return {
      value: 5,
      isshow: false,
      loading: true,
      localsellerlistdata:[]
    };
  },
  methods: {},
  filters: {},
  computed: {
    ...mapState("Seller", ["sellerlistdata"]),
  },
  created() {},
  destroyed() {},
  mounted() {
     if( localStorage.getItem( 'sellerlist' ) ){
      console.log('111')
      this.localsellerlistdata= JSON.parse( localStorage.getItem('sellerlist') ) 
    }
  },
};
</script>
<style lang="scss" scoped>
.seller-list-item {
  padding: 0 10px;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  display: flex;
  text-decoration: none;
  box-sizing: border-box;
  margin-bottom: 50px;
  margin-top: 10px;
  position: relative;
  .left {
    width: 76px;
    height: 57px;
    position: relative;
    box-sizing: border-box;
    margin-right: 8px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 1 0;
    .name {
      font-size: 16px;
      color: #333;
      line-height: 1.4;
      white-space: nowrap;
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 600;
    }
    .mid {
      display: flex;
      margin-top: 4px;
      font-size: 11px;
      color: #333;
      span {
        margin-left: 4px;
      }
      .time {
        flex: 1 0;
        text-align: right;
      }
    }
    .fee {
      margin-top: 4px;
      font-size: 11px;
      color: #333;
      line-height: 1.4;
      .deliver {
        &::before {
          content: "";
          display: inline-block;
          margin: 0 3px;
          height: 6px;
          width: 1px;
          background: #ccc;
        }
      }
      .average {
        &::before {
          content: "";
          display: inline-block;
          margin: 0 3px;
          height: 6px;
          width: 1px;
          background: #ccc;
        }
      }
    }
    .activity {
      color: #666;

      p {
        margin-top: 8px;
        display: flex;
        align-items: center;
        margin-top: 8px;
        img {
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
